<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>
        <input type="checkbox" name="" id="checkAll" />全选/全不选
      </th>
      <th>菜名</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>红烧肉</td>
      <td>隆江猪脚饭</td>
      <td>￥200</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>香酥排骨</td>
      <td>隆江猪脚饭</td>
      <td>￥998</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>北京烤鸭</td>
      <td>隆江猪脚饭</td>
      <td>￥88</td>
    </tr>
  </table>

</body>
<script>
  // 思路：
  //   1 给全选的多选框注册点击事件，判断当前是否是勾选的，根据是否勾选，设置下面的每一项是否勾选

  //   2 给每一项多选框注册点击事件，判断是否全都勾选，如果是，把全选勾选，如果不是，取消勾选全选
  // var ckAll1=document.getElementById('checkAll');
  // var cks=document.getElementsByClassName('ck');
  // ckAll1.onclick=function(){
  //   var tatus=ckAll1.checked;
  //   // 4 判断当前是否勾选，如果勾选，设置每一项都勾选
  // //   if(tatus){
  // //   for(var i=0;i<cks.length;i++){
  // //     cks[i].checked=true;
  // //    }
  // // }
  // // else {
  // //   for(var i=0;i<cks.length;i++){
  // //     cks[i].checked=false;
  // //   }
  // // }
  //   for(var i=0;i<cks.length;i++){
  //     cks[i].checked=tatus;
  //   }
  // }
  // for(var i=0;i<cks.length;i++){
  //   cks[i].onclick = function(){
  //     var flag = true;
  //     for(var j=0;j<cks.length;j++){
  //       if(cks[j].checked!=true){
  //         flag=false;
  //         break;
  //       }
  //     }
  //     if(flag){
  //       ckAll1.checked=true;
  //     }
  //     else{
  //       ckAll1.checked=false;
  //     }
  //   }
  // }
   // 思路：
  //   1 给全选的多选框注册点击事件，判断当前是否是勾选的，根据是否勾选，设置下面的每一项是否勾选

  //   2 给每一项多选框注册点击事件，判断是否全都勾选，如果是，把全选勾选，如果不是，取消勾选全选
  var ckall=document.getElementById('checkAll');
  var cks=document.getElementsByClassName('ck');
  ckall.onclick=function(){
    var tatus=ckall.checked;
    for(var i=0;i<cks.length;i++){
      cks[i].checked=tatus;
    }
  }
  for(var i=0;i<cks.length;i++){
    cks.onclick=function(){
      var flag=true;
      for(var j=0;j<cks.length;j++){
        if(cks[j].checked!=true){
          flag=false;
          break;
        }
      }
      if(flag){
        ckall.checked=true;
      }
      else{
        ckall.checked=false;
      }
    }
  }
  //   1 给全选的多选框注册点击事件，判断当前是否是勾选的，根据是否勾选，设置下面的每一项是否勾选

  //   2 给每一项多选框注册点击事件，判断是否全都勾选，如果是，把全选勾选，如果不是，取消勾选全选
  var 就
 

</script>

</html>